<template>
  <!-- 收益趋势饼状图 -->
  <div class="w-full echart-box">
    <a-skeleton-shape v-if="loading" class="w-full" style="height: 296px" />

    <template v-else>
      <a-empty
        style="background-color: rgba(248, 250, 252, 1)"
        description="根据您的筛选统计数据时发现暂无数据，请重新筛选"
        v-if="echartDataEmpty"
      />
      <a-row v-else>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <div class="echart-item" ref="echartBoxRef"></div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <div class="echarts-table">
            <div class="header">
              <div class="color-black font-medium text-xs mb-2">
                {{ echartData?.date }}
              </div>
            </div>
            <div class="body">
              <div class="flex items-center item-cell">
                <div class="color-gray mr-1" style="width: 40%">门店</div>
                <div class="color-gray mr-2" style="width: 20%">收入</div>
                <div class="color-gray mr-2" style="width: 20%">支出</div>
                <div class="color-gray" style="width: 20%">收益</div>
              </div>
              <template v-if="echartData?.infoList.length > 0">
                <div class="flex items-center list-cell" v-for="item in echartData?.infoList" :key="item.id">
                  <div class="color-black mr-1" style="width: 40%; color: #1d2129">{{ item.name }}</div>
                  <div class="text-price mr-2" style="width: 20%">{{ formatNumber(item.totalRevenueAmount, false) }}</div>
                  <div class="text-price color-green mr-2" style="width: 20%">{{ formatNumber(item.totalExpenditureAmount, false) }}</div>
                  <div class="text-price color-red" style="width: 20%">{{ formatNumber(item.totalProfitAmount, false) }}</div>
                </div>
              </template>
              <template v-else>
                <div class="flex justify-center items-center text-gray-500 text-sm h-full pt-2">暂无数据</div>
              </template>
            </div>
          </div>
        </a-col>
      </a-row>
    </template>
  </div>
</template>
<script setup lang="ts">
  import useEcharts from '@/hooks/useEcharts'
  import { formatNumber } from '@/utils'
  import dayjs from 'dayjs'
  import { dispose } from 'echarts/core'
  import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'

  const props = defineProps({
    echartData: {
      type: Object,
      default: () => {},
    },
  })

  const loading = ref(true)
  const echartBoxRef = ref()
  let echart_series: any[] = []

  let echartInstance: any = null
  const echartInt = () => {
    const option: any = {
      title: {
        text: `${dayjs(props.echartData?.date).format('MM[月]DD[日]')}`,
        top: 'bottom',
        left: '28%',
        textStyle: {
          fontSize: 14,
          color: '#1D2129',
        },
      },
      legend: {
        icon: 'circle',
        itemWidth: 10,
        selectedMode: false,
        top: 'bottom',
        formatter: (name: string) => {
          return name.split('总')[1]
        },
      },
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: props.echartData?.totalProfitAmount ? '46%' : 'center',
            style: {
              text: props.echartData?.totalProfitAmount ? '总收益' : '暂无数据',
              fill: '#1D2129',
              fontSize: 14,
              fontWeight: 500,
            },
          },
          {
            type: 'text',
            left: 'center',
            top: '53%',
            style: {
              text: props.echartData?.totalProfitAmount ? formatNumber(props.echartData?.totalProfitAmount, false) + '元' : '',
              fill: '#1D2129',
              fontSize: 14,
              fontWeight: 500,
            },
          },
        ],
      },
      series: echart_series,
    }

    nextTick(() => {
      echartInstance = useEcharts(echartBoxRef.value)
      echartInstance?.setOption(option, {
        notMerge: true,
      })
    })
    loading.value = false
  }

  onMounted(() => {
    window.addEventListener('resize', () => {
      echartInstance?.resize()
    })
  })

  onBeforeUnmount(() => {
    if (echartInstance) {
      dispose(echartInstance)
    }
  })

  const echartDataEmpty = ref(true)
  watch(
    () => props.echartData,
    (newVal: any) => {
      loading.value = true
      echart_series = []

      if (newVal) {
        const hasData = newVal.totalRevenueAmount != 0 || newVal.totalExpenditureAmount != 0 || newVal.totalProfitAmount != 0

        if (!hasData) {
          loading.value = false
          echartDataEmpty.value = true
          return
        } else {
          echartDataEmpty.value = false
        }

        echart_series = [
          {
            type: 'pie',
            startAngle: 300, //起始角度
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            label: {
              formatter: (params: any) => {
                return `${params.name} \n ${formatNumber(params.data.source, false)}`
              },
              rich: {
                b: {
                  color: '#1E1E1E',
                  fontSize: 12,
                  lineHeight: 14,
                },
                c: {
                  color: '#1E1E1E',
                  fontSize: 12,
                  lineHeight: 14,
                },
              },
            },
            data: [
              {
                value: Math.abs(newVal.totalRevenueAmount),
                source: newVal.totalRevenueAmount,
                legend_name: '收入',
                itemStyle: {
                  color: '#1890FF',
                },
                name: '总收入',
              },
              {
                value: Math.abs(newVal.totalExpenditureAmount),
                source: newVal.totalExpenditureAmount,
                legend_name: '支出',
                itemStyle: {
                  color: '#86DF6C',
                },
                name: '总支出',
              },
            ],
            emphasis: {
              disabled: true,
            },
          },
        ]
        echartInt()
      }
    },
    { immediate: true, deep: true }
  )
</script>
<style lang="less" scoped>
  .echart-box {
    width: 100%;

    .echart-item {
      width: 100%;
      height: 296px;
    }

    .echarts-table {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e5e6eb;
    }

    .text-price {
      color: #178fff;
    }

    .color-black {
      color: #1d2129;
    }

    .color-gray {
      color: #4e5969;
    }

    .color-green {
      color: #5bbc3e;
    }

    .color-red {
      color: #ec6571;
    }

    .item-cell {
      width: 100%;
      height: 32px;
      padding: 6px 10px;
      background: #f2f3f5;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .list-cell {
      width: 100%;
      padding: 6px 10px;
    }
  }
</style>
